<template>
  <div class="qunti">
    <div class="team">
      <div class="powertop">
        <router-link class="powertopli" to="/yonghuyunying/qunti">用户群体管理</router-link>
        <router-link class="powertopli" to="/yonghuyunying/guanli">用户管理</router-link>
      </div>
    </div>
    <div style="padding: 35px 20px;">
      <div class="kflex" style="margin-bottom: 20px;">
        <el-input v-model="search.title" style="width: 280px; margin-right: 20px;" placeholder="人群名称"></el-input>
        <el-select v-model="search.type" style="width: 280px; margin-right: 20px;" placeholder="人群类型">
          <el-option :value="item.id" v-for="item in fenleilist" :key="item.id" :label="item.title"></el-option>
        </el-select>
        <el-button round @click="searchs" type="primary" plain>搜索</el-button>
        <el-button round @click="xinjian" type="danger" plain>新建人群圈选</el-button>
        <el-button round @click="goid('/order_export_yunying')" type="primary" plain>查看导出明细</el-button>
      </div>

      <el-table :data="list" border style="width: 100%">
        <el-table-column align='center' label="人群名称">
          <template slot-scope="scope">
            <div class="kflexc">
              <div><el-button type="primary" size="mini">{{scope.row.type}}</el-button></div>
              <div style="margin-left: 10px;">{{scope.row.title}}</div>
            </div>
            <div class="kflexc" style="margin-top: 10px; ">
              <div  style=" color: rgb(147, 147, 147);">{{scope.row.remark}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center' prop='created_at' label="创建时间"></el-table-column>
        <el-table-column align='center' prop='creator' label="创建人"></el-table-column>



        <el-table-column align='center' label="统计人数">
          <template slot-scope="scope">
            <!-- <div>{{scope.row.user_amount}}</div> -->
            <!-- <div v-if="scope.row.user_amount">{{scope.row.user_amount}}</div> -->
            <div v-if="scope.row.status == 0">未计算</div>
            <div v-if="scope.row.status == 1">计算中</div>
            <div v-if="scope.row.status == 2">{{scope.row.user_amount}}</div>
            <div v-if="scope.row.status == 3">计算失败</div>
          </template>
        </el-table-column>
        <el-table-column align='center' prop='distinct_count' label="去重后统计人数">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 0">未计算</div>
            <div v-if="scope.row.status == 1">计算中</div>
            <div v-if="scope.row.status == 2">{{scope.row.distinct_count}}</div>
            <div v-if="scope.row.status == 3">计算失败</div>
          </template>

        </el-table-column>
        <el-table-column align='center' label="创建短信任务">
          <template slot-scope="scope">
            <div class="kflexcc">
              <el-button type="text" v-if="scope.row.sms_status == 0" @click="chuangjianduanxin(scope.row)">创建</el-button>
              <span v-if="scope.row.sms_status != 0" style="margin-right: 20px;">已创建</span>
              <img src="../../../static/kuanping/fasongLe.png" style="width: 18px; cursor: pointer;" @click="huixian(scope.row,1)" v-if="scope.row.sms_status != 0">
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center' label="创建外呼任务">
          <template slot-scope="scope">
            <div class="kflexcc">
              <el-button type="text" v-if="scope.row.call_status == 0" @click="chuangjianwaihu(scope.row)">创建</el-button>
              <span v-if="scope.row.call_status != 0" style="margin-right: 20px;">已创建</span>
              <img src="../../../static/kuanping/fasongLe.png" style="width: 18px; cursor: pointer;" @click="huixian(scope.row,2)" v-if="scope.row.call_status != 0">
            </div>
          </template>
        </el-table-column>
        <el-table-column align='center' label="同步至91粉系统">
          <template slot-scope="scope">
              <div class="kflexcc">
                <el-button type="text" v-if="scope.row.fans_status == 0 || scope.row.fans_status == 2" @click="chuangjian91(scope.row,1)">同步至91粉</el-button>
                <el-button type="text" v-if="scope.row.fans_status == 1" @click="chuangjian91(scope.row,0)">取消同步</el-button>
                <img src="../../../static/kuanping/fasongLe.png" style="width: 18px; cursor: pointer;" @click="huixian(scope.row,3)" v-if="scope.row.fans_status != 0">
              </div>
          </template>
        </el-table-column>
        <el-table-column align='center' label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="down(scope.row)">下载明细</el-button>
            <el-button type="text" @click="bianji(scope.row)">编辑</el-button>
            <el-button type="text" style="margin-left: 0;" @click="chongxinjisuan(scope.row)">重新计算</el-button>
            <el-button type="text" @click="shanchu(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="total,prev,pager,next" style="text-align: right; padding: 20px;" prev-text="上一页" next-text="下一页" :current-page="search.page" @current-change="fanye"
        :page-size="search.page_size" :total="total"></el-pagination>
    </div>


    <el-dialog :title="jieguo.name" center class="log" :visible.sync="jieguo.log" width="510px">
    	<el-table :data="jieguo.list" border style="width: 100%">
    	  <el-table-column align='center' prop='name' label="任务名称"  v-if="jieguo.type == 1 || jieguo.type == 2"></el-table-column>

        <el-table-column align='center' prop='total_num' label="发送人数" v-if="jieguo.type == 1"></el-table-column>
        <el-table-column align='center' prop='succ_num' label="成功人数" v-if="jieguo.type == 1"></el-table-column>

        <el-table-column align='center' prop='total' label="任务总数" v-if="jieguo.type == 2"></el-table-column>
        <el-table-column align='center' prop='call_num' label="已拨打人数" v-if="jieguo.type == 2"></el-table-column>
        <el-table-column align='center' prop='li' label="拨通率" v-if="jieguo.type == 2"> </el-table-column>

        <el-table-column align='center' prop='add_friend_success_amount' label="添加人数" v-if="jieguo.type == 3"></el-table-column>
        <el-table-column align='center' prop='add_friend_amount' label="有效人数" v-if="jieguo.type == 3"></el-table-column>
    	</el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" round @click="jieguo.log = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    name: 'qunti',
    data() {
      return {
        search:{
          page:1,
          page_size:20,
          title:"",
          type:""
        },
        total:0,
        list:"",
        jieguo:{
          name:"人群短信通知结果",
          log:false,
          list:"",
          type:0,
          name2:""
        },
        fenleilist:""
      }
    },
    created() {
      this.getlist()
      this.gengxin()
    },
    methods:{
      gengxin:function(){
        axios.get("/api/plan-market/crowd/type/list")
          .then( response => {
            if (response.data.msg.code == 0) {
              this.fenleilist = response.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      huixian:function(item,who){
        if(who == 1){
          this.jieguo.name = item.title + '人群短信通知结果'

          this.jieguo.type = 1
          axios.get('/api/plan-market/crowd/sms/statistics?crowd_id='+item.id)
            .then(response => {
          		if(response.data.msg.code == 0){
                this.jieguo.list = [response.data.data] //通过id拿结果
          			this.jieguo.log = true
          		}else{
          			this.$message.error(response.data.msg.info);
          		}
            })
        }
        if(who == 2){
          this.jieguo.name = item.title + '人群外呼通知结果'
          this.jieguo.type = 2

          axios.get('/api/plan-market/crowd/call/statistics?crowd_id='+item.id)
            .then(response => {
          		if(response.data.msg.code == 0){

                if(response.data.data != '' && response.data.data.total != 0){
                  response.data.data.li = (response.data.data.call_num/response.data.data.total*100).toFixed(2)+'%'
                }else{
                  response.data.data.li = "0.00%"
                }
                this.jieguo.list = [response.data.data] //通过id拿结果
          			this.jieguo.log = true
          		}else{
          			this.$message.error(response.data.msg.info);
          		}
            })
        }
        if(who == 3){
          this.jieguo.name = item.title + '同步至91粉通知结果'
          this.jieguo.type = 3
          this.jieguo.name2 = item.title
          let obj = {
            add_friend_amount:item.add_friend_amount,
            add_friend_success_amount:item.add_friend_success_amount,
            name2:item.title
          }
          this.jieguo.list = [obj] //通过id拿结果
          this.jieguo.log = true
        }
      },
      chuangjianduanxin:function(item){
        let shuliang = '未计算'
        if(item.status == 0){
          shuliang = '未计算'
        }
        if(item.status == 1){
          shuliang = '计算中'
        }
        if(item.status == 2){
          shuliang = item.user_amount
        }
        if(item.status == 3){
          shuliang = '计算失败'
        }
        this.$router.push({
          query:{
            id:item.id,
            shuliang:shuliang
          },
          path:"/yonghuyunying/chuangjianduanxin"
        })
      },
      chuangjianwaihu:function(item){
        let shuliang = '未计算'
        if(item.status == 0){
          shuliang = '未计算'
        }
        if(item.status == 1){
          shuliang = '计算中'
        }
        if(item.status == 2){
          shuliang = item.user_amount
        }
        if(item.status == 3){
          shuliang = '计算失败'
        }
        this.$router.push({
          query:{
            id:item.id,
            shuliang:shuliang
          },
          path:"/yonghuyunying/chuangjianwaihu"
        })
      },
      chuangjian91:function(item,val){
        let text = '确定要同步吗？'
        if(val == 0){
          text = '确定要取消同步吗？'
        }
        this.$confirm(text, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        	axios.get('/api/plan-market/crowd/fans/status?id='+item.id+'&fans_status='+val)
        	  .then(response => {
        			if(response.data.msg.code == 0){
        				this.$message({
        					type: 'success',
        					message: '同步成功!'
        				});
        				this.getlist()
        			}else{
        				this.$message.error(response.data.msg.info);
        			}
        	  })
        })
      },
      shanchu:function(item){
        this.$confirm('确定要删除分类吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        	axios.get('/api/plan-market/crowd/del?id='+item.id)
        	  .then(response => {
        			if(response.data.msg.code == 0){
        				this.$message({
        					type: 'success',
        					message: '删除岗位成功!'
        				});
        				this.getlist()
                this.$emit('gengxin')
        			}else{
        				this.$message.error(response.data.msg.info);
        			}
        	  })
        })
      },
      bianji:function(item){
        axios.get('/api/plan-market/crowd/type/del?id='+id)
          .then(response => {
        		if(response.data.msg.code == 0){
        			this.$message({
        				type: 'success',
        				message: '删除岗位成功!'
        			});
        			this.getlist()
              this.$emit('gengxin')
        		}else{
        			this.$message.error(response.data.msg.info);
        		}
          })
      },
      chongxinjisuan:function(item){
        axios.get('/api/plan-market/crowd/user/amount?id='+item.id)
          .then(response => {
        		if(response.data.msg.code == 0){
        			this.$message.success('已重新计算');
              this.getlist()
        		}else{
        			this.$message.error(response.data.msg.info);
        		}
          })
      },
      down:function(item){
        axios.get('/api/plan-market/crowd/user/export?crowd_id='+item.id)
          .then(response => {
        		if(response.data.msg.code == 0){
        			this.$message.success('已提交下载');
              this.$router.push({
                path: '/order_export_yunying'
              })
        		}else{
        			this.$message.error(response.data.msg.info);
        		}
          })

      },
      fanye: function(page) {
        this.search.page = page
        this.getlist()
      },
      searchs:function(){
        this.search.page = 1
        this.getlist()
      },
      getlist:function(){
        axios.post("/api/plan-market/crowd/list",this.search)
          .then( response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data
              this.total = response.data.data.total
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      xinjian:function(){
        this.$router.push('/yonghuyunying/chuangjianrenqun')
      },
      bianji:function(item){
        this.$router.push('/yonghuyunying/chuangjianrenqun?id='+item.id)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .qunti{
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/ .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/ .btn-next{ border-radius: 14px; padding: 0 10px;}

    /deep/ .el-table th{ background: rgb(246, 246, 246);}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250);  border: 0;}
    /deep/ .el-date-editor .el-range-input{ background: rgb(247, 248, 250); }
    /deep/ .el-button{ padding: 11px 23px !important;}
    /deep/ .el-button--mini{ padding: 6px 15px !important;}
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    .team {
    	background: #F9F9F9;
    }

    .powertop {
    	display: flex;
    	background:#f9f9f9;
    }

    .powertopli {
    	flex-basis: 180px;
    	line-height: 50px;
    	border-bottom: 3px #F9F9F9 solid;
    	color: #727272;
    	border-right: 1px #F9F9F9 solid;
    	font-size: 16px;
    	text-align: center;
    }

    .router-link-active {
    	background: #FFFFFF;
    	border-bottom: 3px #2974FF solid;
    }
  }
</style>
